<template>
  <div class="goodsInfo">
    <!-- 头部 -->
    <headers text="黑马商城" >
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template>
    </headers>
    <!--商品轮播  -->
    <van-swipe :autoplay="3000" class="wrap">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" class="goodswipe" />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品价格 -->
    <div class="goodPrice">
      <p>{{ goodParameters.title }}</p>
      <div class="price">
        <span
          >市场价：<del>￥{{ goodParameters.market_price }}</del></span
        >
        <span
          >销售价:<b>￥{{ goodParameters.sell_price }}</b></span
        >
      </div>
      <div class="num">
        <span>购买数量：</span>
        <van-stepper v-model="value" />
      </div>
      <van-button type="info" class="btn">立即购买</van-button>
      <van-button type="danger" class="btn" @click="addToCart"
        >加入购物车</van-button
      >
    </div>
    <!-- 商品参数 -->
    <div class="goodPrice">
      <p>商品参数</p>
      <div class="parameters">
        <h3>商品货号：{{ goodParameters.goods_no }}</h3>
        <h3>库存情况：{{ goodParameters.stock_quantity }}件</h3>
        <h3>上架时间：{{ goodParameters.add_time }}</h3>
      </div>
    </div>
    <!-- 图文介绍 -->
    <div
      class="goodPrice common"
      @click="$router.push({ path: `/GoodDesc/${$route.params.imgid}` })"
    >
      <p>图文介绍</p>
    </div>
    <!-- 商品评论 -->
    <div
      class="goodPrice common"
      @click="$router.push({ path: `/goodcomment/${$route.params.imgid}` })"
    >
      <p>商品评论</p>
    </div>

    <!-- 底部 -->
    <footers :list="goods"></footers>
  </div>
</template>

<script>
import headers from "@/components/headers.vue";
import footers from "@/components/footers.vue";
import { getThumImages } from "@/apis/images";
import { getGoodParameters } from "../../apis/goods";
export default {
  components: {
    headers,
    footers,
  },
  data() {
    return {
      //存储数据
      data: [],
      //图片
      images: [],
      //数据
      goodParameters: {},
      goods: [
        {
          icon: "icon-jia1",
          text: "首页",
          name: "index",
        },
        {
          icon: "icon-huiyuan",
          text: "会员",
          name: "info",
        },
        {
          icon: "icon-gouwuche",
          text: "购物车",
          name: "shop",
        },
        {
          icon: "icon-1-1",
          text: "搜索",
          name: "serach",
        },
      ],
      value: 1,
    };
  },
  async mounted() {
    let id = this.$route.params.imgid;
    this.images = (await getThumImages({ imgid: id })).data.message;
    this.goodParameters = (await getGoodParameters(id)).data.message[0];
  },
  created() {
    this.setgoods = JSON.parse(localStorage.getItem("shop")) || [];
  },
  methods: {
    addToCart() {
      //添加数据
      this.goodParameters.num = this.value;
      this.goodParameters.imagepath = this.images[0].src;
      //转为数组
      this.data = JSON.parse(localStorage.getItem("data")) || [];
      if (this.data.length == 0) {
        this.data.unshift(this.goodParameters);
      } else {
        let i = 0;
        this.data.forEach((v) => {
          if (this.goodParameters.id == v.id) {
            i++;
            v.num = v.num + this.goodParameters.num;
            return;
          }
        });
        if (i == 0) {
          this.data.unshift(this.goodParameters);
        }
      }
      this.$toast.success('商品已添加成功~')
      localStorage.setItem("data", JSON.stringify(this.data));
    },
  },
};
</script>

<style lang='less' scoped>
.goodsInfo {
  padding-bottom: 50px;
}
@import url("//at.alicdn.com/t/font_2621049_2wy8jxt71aw.css");
/deep/.goodswipe {
  width: 100%;
  height: 200px;
  padding: 10px;
}
.goodPrice {
  font-size: 12px;
  padding: 0 20px 10px 20px;
  border: 1px solid #ccc;
  margin: 5px 5px;
  border-radius: 5px;

  p {
    font-size: 16px;
    font-weight: 700;
    color: #26a2ff;
    padding: 2px 10px;
    border-bottom: 1px solid #ccc;
  }
  .price {
    padding: 10px 0;
    span:nth-child(1) {
      margin-right: 50px;
    }
    span:nth-child(2) b {
      font-size: 16px;
      color: red;
    }
  }
  .num {
    display: flex;
    margin-bottom: 10px;
    span:nth-child(1) {
      margin-right: 50px;
    }
  }
  /deep/.btn {
    height: 30px;
    margin-left: 5px;
  }
}
.parameters {
  padding: 15px 0 0 50px;
  h3 {
    font-weight: 400;
    font-size: 12px;
  }
}
.common {
  text-align: center;
  padding: 0 20px 0px 20px;
  p {
    border: none;
  }
}
</style>
